<template>
  <view class="product-container">
    <!-- 返回按钮 -->
    <view class="back-btn" @tap="navigateBack">
      <image src="/static/icons/back.png"></image>
    </view>

    <!-- 商品轮播图 -->
    <swiper class="product-swiper" circular indicator-dots indicator-active-color="#FFFFFF"
      indicator-color="rgba(255,255,255,0.3)" autoplay interval="4000">
      <swiper-item v-for="(item, index) in productInfo?.image" :key="index">
        <image class="swiper-image" :src="item.file_path" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!-- 收藏按钮 -->
    <!--  <view class="collect-btn" @tap="toggleCollect">
      <image :src="isCollected ? '/static/icons/dropdown_collected.png' : '/static/icons/collect.png'"></image>
    </view> -->
    <!-- 商品信息 -->
    <view class="product-info">
      <view class="product-name-row">
        <text class="product-name">{{ productInfo.product_name }}</text>
        <view class="share-btn" @tap="shareProduct">
          <image src="/static/icons/share.png"></image>
          <text>分享</text>
        </view>
      </view>

      <view class="product-desc">{{ productInfo.selling_point }}</view>

      <view class="product-price-row">
        <view class="price-info">
          <text class="product-price">¥{{ productInfo.product_price }}</text>
          <text class="product-original" v-if="productInfo.line_price">¥{{ productInfo.line_price }}</text>
        </view>
        <view class="sales-info">
          <text>{{ productInfo.product_sales }}人已购</text>
        </view>
      </view>

      <!-- 会员价格 -->
      <view class="member-price" v-if="memberInfo.level !== 'basic'">
        <view class="member-tag">
      <!--    <image class="member-icon" :src="getLevelIcon()"></image> -->
          <text>{{ getLevelName() }}折扣</text>
        </view>
        <text class="member-price-value">{{ getMemberPrice() }}%</text>
      </view>
    </view>

    <!-- 商品评价 -->
    <view class="review-section">
      <view class="section-header">
        <text class="section-title">商品评价</text>
        <view class="review-summary">
          <text class="rating">{{ productInfo.rating?.toFixed(1) }}</text>
          <view class="rating-stars">
            <view class="stars-bg">
              <image src="/static/icons/star-bg.png" v-for="i in 5" :key="i"></image>
            </view>
            <view class="stars-active" :style="{ width: `${productInfo.rating / 5 * 100}%` }">
              <image src="/static/icons/star-active.png" v-for="i in 5" :key="i"></image>
            </view>
          </view>
        </view>
        <text class="view-all" @tap="navigateToReviews">查看全部 {{ productInfo.reviewCount }} ></text>
      </view>

      <!-- 评价列表 -->
      <scroll-view class="review-list" scroll-x>
        <view class="review-item" v-for="(item, index) in productInfo.commentData" :key="index">
          <view class="review-user">
            <image class="user-avatar" :src="item.avatar"></image>
            <text class="user-name">{{ item.username }}</text>
          </view>
          <view class="review-content">{{ item.content }}</view>
          <view class="review-images" v-if="item.images && item.images.length > 0">
            <image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" mode="aspectFill"
              @tap="previewReviewImage(item.images, imgIndex)"></image>
          </view>
          <view class="review-time">{{ item.time }}</view>
        </view>
      </scroll-view>
    </view>

    <!-- 促销活动 -->
    <!-- <view class="promotion-section" v-if="promotions.length > 0">
      <view class="section-header">
        <text class="section-title">促销活动</text>
      </view>
      
      <view class="promotion-list">
        <view class="promotion-item" v-for="(item, index) in promotions" :key="index">
          <view class="promotion-tag" :class="item.type">{{item.tag}}</view>
          <text class="promotion-desc">{{item.desc}}</text>
        </view>
      </view>
    </view> -->

    <!-- 商品规格 -->
    <!-- <view class="spec-section">
      <view class="section-header">
        <text class="section-title">商品参数</text>
      </view>
      
      <view class="spec-list">
        <view class="spec-item" v-for="(item, index) in productInfo.specifications" :key="index">
          <text class="spec-name">{{item.name}}</text>
          <text class="spec-value">{{item.value}}</text>
        </view>
      </view>
    </view> -->

    <!-- 选择规格按钮 -->
    <view class="select-spec-btn" @tap="showSpecSelector">
      <text>选择 规格/数量/优惠</text>
      <image src="/static/icons/arrow-right.png"></image>
    </view>

    <!-- 商品详情 -->
    <view class="detail-section">
      <view class="detail-tabs">
        <view class="tab-item" :class="{ active: currentTab === 0 }" @tap="switchTab(0)">
          <text>商品详情</text>
        </view>
        <view class="tab-item" :class="{ active: currentTab === 1 }" @tap="switchTab(1)">
          <text>禅意解析</text>
        </view>
      </view>

      <view class="detail-content">
        <!-- 商品详情内容 -->
        <view v-if="currentTab === 0">
          <rich-text :nodes="getDetailHtml()"></rich-text>
        </view>

        <!-- 禅意解析内容 -->
        <view v-if="currentTab === 1" class="zen-content">
          <view class="zen-item" v-for="(item, index) in productInfo.zenAnalysis" :key="index">
            <view class="zen-title">{{ item.title }}</view>
            <view class="zen-desc">{{ item.content }}</view>
            <image class="zen-image" v-if="item.image" :src="item.image" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐商品 -->
    <view class="recommend-section">
      <view class="section-header">
        <text class="section-title">相关推荐</text>
      </view>

      <scroll-view class="recommend-list" scroll-x>
        <view class="recommend-item" v-for="(item, index) in recommendProducts" :key="index"
          @tap="navigateToProduct(item.id)">
          <image class="recommend-image" :src="item.product_image" mode="aspectFill"></image>
          <text class="recommend-name">{{ item.product_name }}</text>
          <text class="recommend-price">¥{{ item.product_price }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 底部按钮栏 -->
    <view class="bottom-bar">
      <view class="left-actions">
        <view class="action-item" @tap="navigateToHome">
          <image src="/static/icons/home.png"></image>
          <text>首页</text>
        </view>
        <!--s -->
        <view class="action-item" @tap="navigateToCart">
          <view class="cart-wrapper">
            <image src="/static/icons/coupon.png"></image>
            <view class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</view>
          </view>
          <text>购物车</text>
        </view>
      </view>

      <view class="right-actions">
        <button class="add-cart-btn" @tap="showSpecSelector">加入购物车</button>
        <button class="buy-now-btn" @tap="buyNow">立即购买</button>
      </view>
    </view>

    <!-- 规格选择弹窗 -->
    <view class="spec-modal" v-if="showSpecModal">
      <view class="spec-mask" @tap="hideSpecSelector"></view>
      <view class="spec-content">
        <view class="spec-close" @tap="hideSpecSelector">×</view>

        <view class="spec-product">
          <image class="spec-product-image" :src="selectedSpec.image_path || productInfo.product_image"></image>
          <view class="spec-product-info">
            <text class="spec-product-price">¥{{ selectedSpec.product_price || productInfo.product_price }}</text>
            <text class="spec-product-stock">库存：{{ selectedSpec.stock_num || productInfo.product_stock }}件</text>
            <text class="spec-product-selected">已选：{{ getSelectedSpecText() }}</text>
          </view>
        </view>

        <scroll-view class="spec-scroll" scroll-y>
          <!-- 规格选项 -->
          <view v-for="(option, optionIndex) in product_speac.spec_attr" :key="optionIndex" class="spec-option">
            <text class="option-title">{{ option.group_name }}</text>
            <view class="option-values">
              <text v-for="(value, valueIndex) in option.spec_items" :key="valueIndex" class="option-value"
                :class="{ active: selectedOptions[optionIndex] === value.item_id }"
                @tap="selectOption(optionIndex, value.item_id)">
                {{ value.spec_value }}
              </text>
            </view>
          </view>

          <!-- 数量选择 -->
          <view class="spec-quantity">
            <text class="quantity-title">数量</text>
            <view class="quantity-selector">
              <view class="quantity-btn quantity-minus" @tap="decreaseQuantity">-</view>
              <input class="quantity-input" type="number" :value="quantity" @input="updateQuantity" />
              <view class="quantity-btn quantity-plus" @tap="increaseQuantity">+</view>
            </view>
          </view>

          <!-- 优惠券选择 -->
          <!-- <view class="spec-coupons" v-if="availableCoupons.length > 0">
            <text class="coupons-title">优惠券</text>
            <scroll-view class="coupons-list" scroll-x>
              <view 
                v-for="(coupon, couponIndex) in availableCoupons" 
                :key="couponIndex"
                class="coupon-item"
                :class="{ active: selectedCoupon === couponIndex }"
                @tap="selectCoupon(couponIndex)"
              >
                <view class="coupon-value">¥{{coupon.value}}</view>
                <view class="coupon-condition">满¥{{coupon.condition}}可用</view>
              </view>
            </scroll-view>
          </view> -->
        </scroll-view>

        <!-- 底部按钮 -->
        <view class="spec-footer">
          <button class="spec-add-cart" @tap="addToCart">加入购物车</button>
          <button class="spec-buy-now" @tap="confirmBuy">立即购买</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { addCartApi } from '../../api/order';
import { productDetailApi, productRecommendApi } from '../../api/product';
import { userStore } from '@/store/userStore';
import { richtxt } from "@/utils/index"
const user = userStore()
export default {
  data() {
    return {
      productId: '', // 商品ID
      isCollected: false, // 是否已收藏
      currentTab: 0, // 当前选中的Tab
      showSpecModal: false, // 是否显示规格选择弹窗
      quantity: 1, // 选择的商品数量
      selectedOptions: [], // 已选规格
      selectedSpec: {}, // 已选中的规格详情
      selectedCoupon: -1, // 已选择的优惠券
      cartCount: 0, // 购物车数量

      // 会员信息
      memberInfo: {
        level: 'gold',
      },

      // 商品信息
      productInfo: {},
      product_speac: {
        spec_attr: [],
        spec_list: []
      },
      // 促销活动
      promotions: [
        {
          type: 'discount',
          tag: '限时折扣',
          desc: '限时85折，还剩2天12小时'
        },
        {
          type: 'gift',
          tag: '赠品',
          desc: '赠送精美檀木香座一个'
        },
        {
          type: 'shipping',
          tag: '包邮',
          desc: '全国包邮（新疆、西藏、港澳台除外）'
        }
      ],

      // 可用优惠券
      availableCoupons: [
        {
          id: 'c001',
          value: 50,
          condition: 500
        },
        {
          id: 'c002',
          value: 30,
          condition: 300
        },
        {
          id: 'c003',
          value: 15,
          condition: 100
        }
      ],

      // 推荐商品
      recommendProducts: []
    }
  },
  onLoad(options) {
    // 获取商品ID
    if (options.id) {
      this.productId = options.id;
      // 这里应该请求商品详情
      productDetailApi({
        product_id: this.productId
      }).then((res) => {
        this.productInfo = res.detail
        if (res.detail.product_multi_spec) {
          this.product_speac = res.detail.product_multi_spec
        }
        this.cartCount = res.cart_total_num
        // 初始化已选规格
        this.initSelectedOptions();
      })
    }
    //推荐商品
    productRecommendApi({
      location: "product"
    }).then((res) => {
      this.recommendProducts = res.list
    })
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 初始化已选规格
    initSelectedOptions() {
      // 默认选择每个规格的第一个选项
      this.selectedOptions = this.product_speac.spec_attr.map((option) => {
        return option.spec_items[0].item_id
      });
      console.log(this.selectedOptions)
      this.updateSelectedSpec();
    },

    // 切换收藏状态
    toggleCollect() {
      this.isCollected = !this.isCollected;
      uni.showToast({
        title: this.isCollected ? '已加入收藏' : '已取消收藏',
        icon: 'none'
      });
    },

    // 分享商品
    shareProduct() {
      uni.showShareMenu({
        withShareTicket: true,
        success() {
          uni.showToast({
            title: '请选择分享方式',
            icon: 'none'
          });
        }
      });
    },

    // 获取会员等级图标
    // getLevelIcon() {
    //   const iconMap = {
    //     basic: '/static/icons/level-basic.png',
    //     silver: '/static/icons/level-silver.png',
    //     gold: '/static/icons/level-gold.png',
    //     platinum: '/static/icons/level-platinum.png',
    //   };
    //   return iconMap["gold"] || iconMap.basic;
    // },

    // 获取会员等级名称
    getLevelName() {
      return user.userInfo.grade?.name || '基础会员';
    },

    // 获取会员价格
    getMemberPrice() {
      return user.userInfo.grade?.equity || 100;
    },

    // 预览评价图片
    previewReviewImage(images, index) {
      uni.previewImage({
        current: images[index],
        urls: images
      });
    },

    // 切换详情Tab
    switchTab(index) {
      this.currentTab = index;
    },

    // 导航到评价页面
    navigateToReviews() {
      uni.navigateTo({
        url: `/pages/product/reviews?id=${this.productInfo.id}`
      });
    },

    // 导航到其他商品详情
    navigateToProduct(id) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${id}`
      });
    },

    // 导航到首页
    navigateToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },

    // 导航到客服
    navigateToCustomerService() {
      // 打开客服会话
      uni.showToast({
        title: '正在接入客服，请稍候...',
        icon: 'none'
      });
    },

    // 导航到购物车
    navigateToCart() {
      uni.navigateTo({
        url: '/pages/shapping/cart'
      });
    },

    // 显示规格选择器
    showSpecSelector() {
      this.showSpecModal = true;
    },

    // 隐藏规格选择器
    hideSpecSelector() {
      this.showSpecModal = false;
    },

    // 选择规格
    selectOption(optionIndex, valueIndex) {
      this.selectedOptions[optionIndex] = valueIndex;
      this.updateSelectedSpec();
    },

    // 更新已选规格信息
    updateSelectedSpec() {
      // 查找匹配的规格组合
      const matchedSpec = this.product_speac.spec_list.find(spec => {
        console.log(spec.spec_sku_id, this.selectedOptions.join("_"))
        return spec.spec_sku_id === this.selectedOptions.join("_");
      });
      console.log(this.selectedOptions)
      if (matchedSpec) {
        this.selectedSpec = {
          spec_sku_id: matchedSpec.spec_sku_id,
          ...matchedSpec.spec_form
        };
      } else {
        // 如果没有完全匹配的规格组合，使用默认值
        this.selectedSpec = {
          spec_sku_id: "",
          product_price: this.productInfo.product_price,
          stock_num: this.productInfo.product_stock,
          image_path: this.productInfo.product_image
        };
      }
      console.log(this.selectedSpec)
    },

    // 获取已选规格文本
    getSelectedSpecText() {
      const selectedText = this.product_speac.spec_attr.map((option, index) => {
        const valueIndex = this.selectedOptions[index];
        const valueSeled = option.spec_items.find(item => item.item_id == valueIndex)
        return `${option.group_name}: ${valueSeled.spec_value}`;
      });

      return `${selectedText.join('，')}，${this.quantity}件`;
    },

    // 减少数量
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },

    // 增加数量
    increaseQuantity() {
      const stock = this.selectedSpec.stock_num || this.productInfo.product_stock;
      if (this.quantity < stock) {
        this.quantity++;
      } else {
        uni.showToast({
          title: '已达最大库存',
          icon: 'none'
        });
      }
    },

    // 更新数量
    updateQuantity(e) {
      const value = parseInt(e.detail.value);
      const stock = this.selectedSpec.stock_num || this.productInfo.product_stock;

      if (value > 0 && value <= stock) {
        this.quantity = value;
      } else if (value > stock) {
        this.quantity = stock;
        uni.showToast({
          title: '已达最大库存',
          icon: 'none'
        });
      } else {
        this.quantity = 1;
      }
    },

    // 选择优惠券
    selectCoupon(index) {
      this.selectedCoupon = index;
    },

    // 加入购物车
    addToCart() {
      uni.showLoading({
        title: '正在加入...'
      });
      addCartApi({
        product_id: this.productId,
        total_num: this.quantity,
        spec_sku_id: this.selectedSpec.spec_sku_id
      }).then((res) => {
        uni.hideLoading();
        this.cartCount = res.cart_total_num
        // 成功提示
        uni.showToast({
          title: '已加入购物车',
          icon: 'success'
        });
        // 关闭弹窗
        this.hideSpecSelector();
      }).catch((err) => {
        uni.hideLoading();
        // 成功提示
        uni.showToast({
          title: err,
          icon: 'none'
        });
      })
    },

    // 立即购买按钮
    buyNow() {
      this.showSpecSelector();
    },

    // 确认购买
    confirmBuy() {
      uni.showLoading({
        title: '正在处理...'
      });

      // 模拟跳转到结算页面
      setTimeout(() => {
        uni.hideLoading();

        // 跳转到结算页面
        /*
        product_id:this.productId,
        total_num:this.quantity,
        spec_sku_id:this.selectedSpec.spec_sku_id
        */
        console.log(this.selectedSpec)
        //保存要传递的商品信息
        uni.setStorageSync("buy_item", {
          product_id: this.productId,
          product_name: this.productInfo.product_name,
          product_image: this.selectedSpec.image_path ? this.selectedSpec.image_path : this.productInfo.product_image,
          product_price: this.selectedSpec.product_price ?? this.productInfo.product_price,
          total_num: this.quantity,
          spec_sku_id: this.selectedSpec.spec_sku_id,
          spec_sku_text: this.getSelectedSpecText()
        })
        uni.navigateTo({
          url: `/pages/checkout/checkout?type=buy`
        });
      }, 800);
    },

    getDetailHtml() {
      if (this.productInfo.content) {
        return richtxt(this.productInfo.content)
      }
      else {
        return ""
      }
    }
  }
}
</script>

<style>
.product-container {
  background-color: #F8F6F1;
  /* 米白色背景 */
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 返回按钮样式 */
.back-btn {
  position: fixed;
  top: 80rpx;
  left: 30rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.back-btn image {
  width: 40rpx;
  height: 40rpx;
}

/* 轮播图样式 */
.product-swiper {
  width: 100%;
  height: 750rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 收藏按钮样式 */
.collect-btn {
  position: fixed;
  top: 80rpx;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.collect-btn image {
  width: 40rpx;
  height: 40rpx;
}

/* 商品信息样式 */
.product-info {
  margin-top: -60rpx;
  padding: 40rpx 30rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;
  z-index: 10;
}

.product-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.product-name {
  flex: 1;
  font-size: 36rpx;
  color: #4D3F33;
  font-weight: bold;
  line-height: 1.4;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30rpx;
  padding-top: 6rpx;
}

.share-btn image {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 6rpx;
}

.share-btn text {
  font-size: 22rpx;
  color: #A89B88;
}

.product-desc {
  font-size: 28rpx;
  color: #75695C;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.product-price {
  font-size: 40rpx;
  color: #8B5A2B;
  /* 檀木棕 */
  font-weight: bold;
}

.product-original {
  font-size: 28rpx;
  color: #A89B88;
  text-decoration: line-through;
  margin-left: 16rpx;
}

.sales-info {
  font-size: 24rpx;
  color: #A89B88;
}

/* 会员价格样式 */
.member-price {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  padding: 12rpx 20rpx;
  background-color: #FFFBEB;
  border-radius: 10rpx;
}

.member-tag {
  display: flex;
  align-items: center;
  height: 40rpx;
  padding: 0 10rpx;
  background-color: #E2C675;
  /* 佛经黄 */
  border-radius: 6rpx;
}

.member-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 6rpx;
}

.member-tag text {
  font-size: 22rpx;
  color: #FFFFFF;
}

.member-price-value {
  font-size: 28rpx;
  color: #E2C675;
  /* 佛经黄 */
  font-weight: bold;
  margin-left: 16rpx;
}

/* 商品评价样式 */
.review-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #4D3F33;
  font-weight: bold;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.review-summary {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  flex: 1;
}

.rating {
  font-size: 32rpx;
  color: #E2C675;
  /* 佛经黄 */
  font-weight: bold;
  margin-right: 16rpx;
}

.rating-stars {
  position: relative;
  width: 150rpx;
  height: 30rpx;
}

.stars-bg,
.stars-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
}

.stars-bg {
  width: 100%;
}

.stars-active {
  overflow: hidden;
}

.stars-bg image,
.stars-active image {
  width: 30rpx;
  height: 30rpx;
}

.view-all {
  font-size: 24rpx;
  color: #78A77F;
  /* 青瓷绿 */
}

.review-list {
  white-space: nowrap;
}

.review-item {
  display: inline-block;
  width: 600rpx;
  padding: 30rpx;
  margin-right: 20rpx;
  background-color: #F8F6F1;
  border-radius: 16rpx;
  vertical-align: top;
}

.review-user {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 16rpx;
}

.user-name {
  font-size: 28rpx;
  color: #4D3F33;
}

.review-content {
  font-size: 28rpx;
  color: #4D3F33;
  line-height: 1.6;
  margin-bottom: 16rpx;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-images {
  display: flex;
  margin-bottom: 16rpx;
}

.review-images image {
  width: 140rpx;
  height: 140rpx;
  margin-right: 10rpx;
  border-radius: 8rpx;
}

.review-time {
  font-size: 24rpx;
  color: #A89B88;
}

/* 促销活动样式 */
.promotion-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
}

.promotion-list {
  padding: 10rpx 0;
}

.promotion-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.promotion-tag {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  margin-right: 16rpx;
}

.promotion-tag.discount {
  background-color: #E95F5C;
}

.promotion-tag.gift {
  background-color: #78A77F;
  /* 青瓷绿 */
}

.promotion-tag.shipping {
  background-color: #E2C675;
  /* 佛经黄 */
}

.promotion-desc {
  font-size: 28rpx;
  color: #4D3F33;
}

/* 商品规格样式 */
.spec-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
}

.spec-list {
  display: flex;
  flex-wrap: wrap;
}

.spec-item {
  width: 50%;
  display: flex;
  margin-bottom: 16rpx;
}

.spec-name {
  font-size: 28rpx;
  color: #A89B88;
  width: 150rpx;
}

.spec-value {
  flex: 1;
  font-size: 28rpx;
  color: #4D3F33;
}

/* 选择规格按钮样式 */
.select-spec-btn {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-spec-btn text {
  font-size: 28rpx;
  color: #4D3F33;
}

.select-spec-btn image {
  width: 32rpx;
  height: 32rpx;
}

/* 商品详情样式 */
.detail-section {
  margin-top: 20rpx;
  background-color: #FFFFFF;
}

.detail-tabs {
  display: flex;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #75695C;
  position: relative;
}

.tab-item.active {
  color: #4D3F33;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background-color: #78A77F;
  /* 青瓷绿 */
  border-radius: 3rpx;
}

.detail-content {
  padding: 30rpx;
}

.zen-content {
  padding: 10rpx 0;
}

.zen-item {
  margin-bottom: 40rpx;
}

.zen-title {
  font-size: 32rpx;
  color: #4D3F33;
  font-weight: bold;
  margin-bottom: 16rpx;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.zen-desc {
  font-size: 28rpx;
  color: #75695C;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.zen-image {
  width: 100%;
  border-radius: 16rpx;
}

/* 推荐商品样式 */
.recommend-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
}

.recommend-list {
  white-space: nowrap;
  margin-top: 20rpx;
}

.recommend-item {
  display: inline-block;
  width: 240rpx;
  margin-right: 20rpx;
}

.recommend-image {
  width: 240rpx;
  height: 240rpx;
  border-radius: 12rpx;
  margin-bottom: 10rpx;
}

.recommend-name {
  font-size: 28rpx;
  color: #4D3F33;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
  height: 78rpx;
}

.recommend-price {
  font-size: 28rpx;
  color: #8B5A2B;
  /* 檀木棕 */
  font-weight: bold;
}

/* 底部按钮栏样式 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  display: flex;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  z-index: 90;
}

.left-actions {
  display: flex;
  width: 40%;
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.action-item image {
  width: 44rpx;
  height: 44rpx;
  margin-bottom: 6rpx;
}

.action-item text {
  font-size: 20rpx;
  color: #75695C;
}

.cart-wrapper {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  min-width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
  background-color: #E95F5C;
  color: #FFFFFF;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
}

.right-actions {
  display: flex;
  width: 60%;
}

.add-cart-btn,
.buy-now-btn {
  flex: 1;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
}

.add-cart-btn {
  background-color: #E2C675;
  /* 佛经黄 */
}

.buy-now-btn {
  background-color: #78A77F;
  /* 青瓷绿 */
}

/* 规格选择弹窗样式 */
.spec-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.spec-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.spec-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border-radius: 30rpx 30rpx 0 0;
  padding-bottom: 40rpx;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.spec-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #A89B88;
  z-index: 10;
}

.spec-product {
  display: flex;
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.spec-product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.spec-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spec-product-price {
  font-size: 36rpx;
  color: #8B5A2B;
  /* 檀木棕 */
  font-weight: bold;
  margin-bottom: 10rpx;
}

.spec-product-stock {
  font-size: 26rpx;
  color: #A89B88;
  margin-bottom: 10rpx;
}

.spec-product-selected {
  font-size: 26rpx;
  color: #4D3F33;
}

.spec-scroll {
  flex: 1;
  max-height: 60vh;
  overflow-y: auto;
}

.spec-option {
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.option-title {
  font-size: 28rpx;
  color: #4D3F33;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.option-values {
  display: flex;
  flex-wrap: wrap;
}

.option-value {
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  background-color: #F8F6F1;
  font-size: 26rpx;
  color: #75695C;
  margin-right: 20rpx;
  margin-bottom: 16rpx;
}

.option-value.active {
  background-color: #78A77F;
  /* 青瓷绿 */
  color: #FFFFFF;
}

.spec-quantity {
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.quantity-title {
  font-size: 28rpx;
  color: #4D3F33;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.quantity-selector {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #F8F6F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #4D3F33;
}

.quantity-minus {
  border-radius: 8rpx 0 0 8rpx;
}

.quantity-plus {
  border-radius: 0 8rpx 8rpx 0;
}

.quantity-input {
  width: 80rpx;
  height: 60rpx;
  background-color: #F8F6F1;
  text-align: center;
  font-size: 28rpx;
  color: #4D3F33;
}

.spec-coupons {
  padding: 30rpx;
}

.coupons-title {
  font-size: 28rpx;
  color: #4D3F33;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.coupons-list {
  white-space: nowrap;
}

.coupon-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  height: 160rpx;
  background-color: #F8F6F1;
  border-radius: 16rpx;
  margin-right: 20rpx;
  padding: 20rpx;
}

.coupon-item.active {
  background-color: #FFFBEB;
  border: 2rpx solid #E2C675;
  /* 佛经黄 */
}

.coupon-value {
  font-size: 32rpx;
  color: #E95F5C;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.coupon-condition {
  font-size: 22rpx;
  color: #A89B88;
  text-align: center;
}

.spec-footer {
  display: flex;
  padding: 30rpx;
}

.spec-add-cart,
.spec-buy-now {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #FFFFFF;
  border: none;
}

.spec-add-cart {
  background-color: #E2C675;
  /* 佛经黄 */
  margin-right: 20rpx;
}

.spec-buy-now {
  background-color: #78A77F;
  /* 青瓷绿 */
}
</style>